<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="pages bg-fff">
            <scroll-view :scroll-x="true" class="kaiNav" v-if="kaiList.length > 1">
                <block v-for="(kai, index) in kaiList" :key="index">
                    <view class="kaiItem" :class="{'active': kaiId == kai.id}" @click="kaiId = kai.id">
                        {{kai.title}}
                    </view>
                </block>
            </scroll-view>
            
            <block v-if="isNoEmpty">
                <view class="cardItem" v-if="xiaoguoList.length > 0">
                    <text class="cardTit col-grey font16">效果图({{xiaoguoList.length}})</text>
                    <view class="item flex">
                        <block v-for="(item,index) in xiaoguoList" :key="index">
                            <image class="cardImg" :src="item.url" :lazy-load="true" mode="aspectFill" @click="previewImages('xiaoguo',index)"></image>
                        </block>
                    </view>
                </view>
                
                <view class="cardItem" v-if="shiJingList.length > 0">
                    <text class="cardTit col-grey font16">实景图({{shiJingList.length}})</text>
                    <view class="item flex">
                        <block v-for="(item,index) in shiJingList" :key="index">
                            <image class="cardImg" :src="item.url" :lazy-load="true" @click="previewImages('shiJing',index)" mode="aspectFill"></image>
                        </block>
                    </view>
                </view>

                <view class="cardItem" v-if="templateList.length > 0">
                    <text class="cardTit col-grey font16">样板间({{templateList.length}})</text>
                    <view class="item flex">
                        <block v-for="(item,index) in templateList" :key="index">
                            <image class="cardImg" :src="item.url" :lazy-load="true" @click="previewImages('template',index)" mode="aspectFill"></image>
                        </block>
                    </view>
                </view>

                <view class="cardItem" v-if="aroundList.length > 0">
                    <text class="cardTit col-grey font16">周边配套({{aroundList.length}})</text>
                    <view class="item flex">
                        <block v-for="(item,index) in aroundList" :key="index">
                            <image class="cardImg" :src="item.url" :lazy-load="true" @click="previewImages('around', index)" mode="aspectFill"></image>
                        </block>
                    </view>
                </view>
            
                <view class="cardItem" v-if="niaokanList.length > 0">
                    <text class="cardTit col-grey font16">鸟瞰图({{niaokanList.length}})</text>
                    <view class="item flex">
                        <block v-for="(item,index) in niaokanList" :key="index">
                            <image class="cardImg" :src="item.url" :lazy-load="true" @click="previewImages('niaokan', index)" mode="aspectFill"></image>
                        </block>
                    </view>
                </view>
                <view class="cardItem" v-if="zongpingList.length > 0">
                    <text class="cardTit col-grey font16">楼盘总平</text>
                    <view class="zongping">
                        <block v-for="(item,index) in zongpingList" :key="index">
                            <image class="zongpingImg" :src="item.url" :lazy-load="true" mode="widthFix" @click="previewImages('zongping', index)"></image>
                        </block>
                    </view>
                </view>

                <!-- <view class="lineHeight15 border-top-grey padding-top-10 top-15 font10 col-grey">
                    免责声明：{{ disclaimer }}
                </view> -->

                <u-gap height="40" bg-color="#fff"></u-gap>
            </block>

            <up-empty text="暂无数据" mode="list" marginTop="100" v-if="!isNoEmpty"></up-empty>

			<!-- <bind-seller-bottom-bar :detail="recommendAdviser" v-if="recommendAdviser&&recommendAdviser.avatar_url"></bind-seller-bottom-bar> -->
                
            <!-- <share-btn :display="scrollAnimate"></share-btn> -->
        </view>
    </block>
</template>
<script>
    import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useConfigStore, useIndexStore } from '@/store/index';
    import { isBoolean } from '@/common/common';
	import { houseAlbumAPI } from "@/common/api";
    import { hasAlbumPanList } from '@/common/api/house';
    // import { dispatchClient } from '@/common/api-adviser';
    // import { getSellerInfoById } from '@/common/api/adviser';

	export default {
		data() {
			return {
                title: '',
				productId: '',
                kaiId: '',
                kaiList: [],
                albumDefID: 0,
                albumImgsObj: {},
                scrollAnimate: false,
                share: false,
                start_time: 0,
                recommendAdviser: {}
            }
		},
        computed:{
            ...mapState(useConfigStore, ['scene', 'puid']),
            ...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useIndexStore, ['disclaimer']),

            xiaoguoList: function() {
                //就是轮播图
                const currKaiObj = this.albumImgsObj[this.kaiId];
                return currKaiObj?.image_list || [];
            },
            
            shiJingList: function() {
                const currKaiObj = this.albumImgsObj[this.kaiId];
                return currKaiObj?.real_image || [];
            },

            templateList: function() {
                const currKaiObj = this.albumImgsObj[this.kaiId];
                return currKaiObj?.template_list || [];
            },

            aroundList: function() {
                const currKaiObj = this.albumImgsObj[this.kaiId];
                return currKaiObj?.around_image || [];
            },

            niaokanList: function() {
                const currKaiObj = this.albumImgsObj[this.kaiId];
                return currKaiObj?.house_overlook || [];
            },

            zongpingList: function() {
                const currKaiObj = this.albumImgsObj[this.kaiId];
                return currKaiObj?.house_layout || [];
            },

            isNoEmpty: function() {
                return this.xiaoguoList.length > 0 || this.templateList.length > 0 || this.aroundList.length > 0 || this.niaokanList.length > 0 || this.zongpingList.length > 0
            }
        },
        
        onShareAppMessage(res) {
            return {
                title: `【${this.title}】楼盘相册`,
                path: `/pages/product/album/index?productId=${this.productId}&kaiId=${this.kaiId}&title=${this.title}&share=true&puid=${this.userInfo.id}&prepage=楼盘相册-${this.productId}-${this.title}`,
            }
        },
        
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `【${this.title}】楼盘相册`,
                query: `productId=${this.productId}&kaiId=${this.kaiId}&title=${this.title}&share=true&puid=${this.userInfo.id}&prepage=楼盘相册-${this.productId}-${this.title}`
            }
        },
        //#endif
        
		onLoad(options) {
            const that = this;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            let { productId='', kaiId='', title='', puid='', share=false } = options;
            this.title = title&&title!=='undefined'?title:'';
			this.productId = productId&&productId!=='undefined'?productId:'';
            this.kaiId = kaiId&&kaiId!=='undefined'?kaiId:'';
            this.share = isBoolean(share);
            this.start_time = (new Date()).getTime();

            if(puid) {
                this.setPuid(puid)
            }

            uni.$check_and_login(function () {
                that.init();
            })
		},

		methods: {
            ...mapActions(useConfigStore, ['setPuid']),

            //初始化
			async init(){
                let kaiAlbumObj = {};
                let albumArr = [];

                //绑定客户
                // await dispatchClient({
                //     share: this.share,
                //     puid: this.puid,
                //     pid: this.productId
                // });

                //开盘的相册
                let hasAalbumRes = await hasAlbumPanList(this.productId);
                if(hasAalbumRes.status === 0) {
                    albumArr = [...hasAalbumRes.detail]
                }else {
                    uni.$u.toast(hasAalbumRes.detail)
                }

                //楼盘的相册
                let prodAlbumRes = await houseAlbumAPI(this.productId);
                if(prodAlbumRes.status === 0) {
                    albumArr.push({
                        id: this.albumDefID,
                        title: '往期',
                        image: prodAlbumRes.detail
                    })
                }else {
                    uni.$u.toast(prodAlbumRes.detail)
                }

                albumArr.forEach(item => {
                    kaiAlbumObj[item.id] = item.image;
                })

                const findPanId = albumArr.find(item => item.id === this.kaiId);

                this.kaiId = findPanId || albumArr[0].id;

                this.kaiList = albumArr;

                this.albumImgsObj = kaiAlbumObj;

                //根据顾问ID获取被绑定的顾问信息
                // if(this.puid && this.puid !== this.userInfo.id) {
                //     let sellInfoRes = await getSellerInfoById({id:this.puid, productId: this.productId});

                //     if(sellInfoRes.status === 0) {
                //         if(sellInfoRes.detail.product_id && sellInfoRes.detail.product_id == this.productId) {
                //             this.recommendAdviser = sellInfoRes.detail;
                //         }
                //     }
                // }
			},

			// 预览图片
			previewImages(type, index){
                let list = [];
                switch(type) {
                    case 'xiaoguo':
                    list = this.xiaoguoList;
                    break;
                    
                    case 'shiJing':
                    list = this.shiJingList;
                    break;
                    
                    case 'template':
                    list = this.templateList;
                    break;
                    
                    case 'around':
                    list = this.aroundList;
                    break;
                    
                    case 'niaokan':
                    list = this.niaokanList;
                    break;
                    case 'zongping':
                    list = this.zongpingList;
                    break;
                    
                    default:
                    list = []
                }
				uni.previewImage({
					current: index,
					urls: list.map(item => item.url),
					longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
					},
					fail: function(err) {
					}
				}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages{
        line-height: 1.4;
        min-height: 100vh;
        padding: 0 28rpx 28rpx;
        border-top: 2rpx solid #FFFFFF;
        .kaiNav{
            width: 100%;
            height: 90rpx;
            line-height: 88rpx;
            white-space: nowrap;
            border-bottom: 1rpx solid rgba(0,0,0,.05);
            .kaiItem{
                display: inline-block;
                margin: 0rpx 20rpx;
                position: relative;
            }
            .active{
                font-size: 32rpx;
                font-weight: bold;
                &::after{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 20%;
                    width: 60%;
                    height: 5rpx;
                    background-color: $theme-color;
                }
            }
        }
        .cardItem{
            margin-top: 30rpx;
            .cardTit{
                display: block;
                margin-bottom: 30rpx;
            }
            .zongpingImg{
                width: 100%;
                margin-top: 30rpx;
            }
        }
        .item{
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start;
            margin-bottom: 20rpx;
            .cardImg{
                width: 157rpx;
                height: 157rpx;
                display: inline-block;
                margin: 8rpx;
            }
        }
	}
</style>
